<template>
  <a-spin :loading="loading" style="width: 100%; height: 100%">
    <a-card
      class="general-card"
      :title="title"
      :header-style="{ paddingBottom: '12px' }"
      style="position: center"
    >
      <div class="content">
        <template> 总回答人数： </template>
        <a-statistic
          :value="count"
          :show-group-separator="true"
          :value-from="0"
          animation
        />
      </div>
      <div class="chart" style="height: 220px">
        <Chart
          style="height: 210px; margin-top: 10px; margin-bottom: 0"
          :option="chartOption"
        />
      </div>
    </a-card>
  </a-spin>
</template>

<script lang="ts" setup>
  import { computed, ref } from 'vue';
  import useLoading from '@/hooks/loading';
  import {
    queryDataChainGrowth,
    DataChainGrowth,
    screenQueryDataChainGrowth,
  } from '@/api/visualization';
  import useChartOption from '@/hooks/chart-option';
  import questionDataSurveyStore from '../../../../store/modules/data-screen';

  const props = defineProps({
    title: {
      type: String,
      default: '',
    },
    quota: {
      type: String,
      default: '',
    },
    chartType: {
      type: String,
      default: '',
    },
    index: {
      type: Number,
      default: 0,
    },
    count: {
      type: Number,
      default: 0,
    },
  });
  const { loading, setLoading } = useLoading(true);
  // const count = ref(0);
  const growth = ref(100);
  const isUp = computed(() => growth.value > 50);
  const chartData = ref<any>([]);
  const chartXaxis = ref<any>([]);

  const question = questionDataSurveyStore();
  const questionData = ref(question.questions);
  // const questionDataNow = ref(questionData.value[props.index])
  // const chartXaxis = ref([questionDataNow.foreach])

  // function getXaxis() {
  //   let i : number;
  //   let xaistemp = [];
  //   for(i=0;i<=questionData.value.length;i ++){
  //     xaistemp.push(questionData.value[props.index].choices[i].content)
  //   }
  //   return xaistemp;
  // }
  //
  // const chartXaxis = ref(getXaxis())

  function typeJudge(chartType: string) {
    if (chartType === 'line') {
      return {
        type: 'line',
        showSymbol: false,
        smooth: true,
        lineStyle: {
          color: '#4080FF',
        },
      };
    }
    if (chartType === 'bar') {
      return {
        type: 'bar',
        barWidth: 15,
        barGap: '0',
      };
    }
    return {
      type: 'pie',
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
        },
      },
      label: {
        formatter: '{d}%',
        color: '#4E5969',
      },
    };
  }

  function axisShowJudge(chartType: string) {
    if (chartType === 'pie') {
      return {
        xAxis: {
          show: false,
        },
        tooltip: {
          trigger: 'item',
        },
      };
    }
    return {
      // legend: {
      //   left: 'center',
      //   data: chartXaxis.value,
      //   bottom: 0,
      //   icon: 'circle',
      //   itemWidth: 8,
      //   textStyle: {
      //     color: '#4E5969',
      //   },
      //   itemStyle: {
      //     borderWidth: 0,
      //   },
      // },

      xAxis: {
        type: 'category',
        show: true,
        data: chartXaxis.value,
        // data:["A","B","C","D"],
        axisLabel: {
          show: true,
          color: '#4E5969',
          rotate: 15,
          padding: [0, 0, 0, -120],
        },
        axisTick: {
          show: true,
          length: 2,
          lineStyle: {
            color: '#A9AEB8',
          },
          alignWithLabel: true,
        },
        axisLine: {
          lineStyle: {
            color: '#A9AEB8',
          },
        },
      },

      tooltip: {
        show: true,
        trigger: 'axis',
        formatter: '{c}',
      },
    };
  }

  const { chartOption } = useChartOption(() => {
    return {
      grid: {
        left: '2.6%',
        right: '4',
        top: '10',
        bottom: '40',
      },
      ...axisShowJudge(props.chartType),

      yAxis: {
        show: false,
      },

      series: [
        {
          data: chartData.value,
          // ...(props.chartType === 'bar'
          //   ? {
          //       type: 'bar',
          //       barWidth: 7,
          //       barGap: '0',
          //     }
          //   : {
          //       type: 'line',
          //       showSymbol: false,
          //       smooth: true,
          //       lineStyle: {
          //         color: '#4080FF',
          //       },
          //     }),

          // ...(typeJudge(props.chartType)),

          ...typeJudge(props.chartType),
        },
      ],
    };
  });

  const fetchData = async (params: DataChainGrowth) => {
    try {
      const dataNow = questionData.value[props.index];

      dataNow.choices.forEach((el, idx) => {
        if (props.chartType === 'bar') {
          chartData.value.push({
            value: el.choiceQuantity,
            itemStyle: {
              color: idx % 2 ? '#468DFF' : '#86DF6C',
            },
          });
        } else if (props.chartType === 'line') {
          chartData.value.push(el.choiceQuantity);
        } else {
          chartData.value.push({
            value: el.choiceQuantity,
            name: el.content,
          });
        }
      });

      dataNow.choices.forEach((el) => {
        chartXaxis.value.push(el.content);
      });
    } catch (err) {
      // you can report use errorHandler or other
    } finally {
      setLoading(false);
    }
  };
  fetchData({ quota: props.quota });

  // const fetchData = async (params: DataChainGrowth) => {
  //   try {
  //     // console.log("fetchData进来了")
  //     const { data } = await screenQueryDataChainGrowth(params);
  //
  //     // console.log("data")
  //     // console.log(data)
  //     // console.log("data")
  //
  //     const { chartData: resChartData } = data;
  //     count.value = data.count;
  //     growth.value = data.growth;
  //     resChartData.data.value.forEach((el, idx) => {
  //       console.log("el")
  //       console.log(el)
  //       console.log("el")
  //
  //       console.log("idx")
  //       console.log(idx)
  //       console.log("idx")
  //
  //       if (props.chartType === 'bar') {
  //         chartData.value.push({
  //           value: el,
  //           itemStyle: {
  //             color: idx % 2 ? '#468DFF' : '#86DF6C',
  //           },
  //         });
  //       } else {
  //         chartData.value.push(el);
  //       }
  //     });
  //
  //     resChartData.xAxis.forEach((el) => {
  //       chartXaxis.value.push(el);
  //     });
  //
  //
  //     //
  //     console.log("chartData.value")
  //     console.log(chartData.value)
  //     console.log("chartData.value")
  //
  //     console.log("chartXaxis.value")
  //     console.log(chartXaxis.value)
  //     console.log("chartXaxis.value")
  //
  //
  //
  //
  //
  //
  //
  //   } catch (err) {
  //     // you can report use errorHandler or other
  //   } finally {
  //     setLoading(false);
  //   }
  // };
  // fetchData({ quota: props.quota });
</script>

<style scoped lang="less">
  .general-card {
    min-height: 204px;
  }

  .content {
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 12px;
  }

  .percent-text {
    margin-left: 16px;
  }

  .chart {
    width: 100%;
    height: 80px;
    vertical-align: bottom;
  }

  .unit {
    padding-left: 8px;
    font-size: 12px;
  }

  .label {
    padding-right: 8px;
    font-size: 12px;
  }
</style>
